import React from "react";
import { Link, useHistory, Route, Redirect, useRouteMatch } from "react-router-dom";
import { useRequest } from "./hooks";

// react-router-dom hooks的方法
/* 
! useHistory : 可以用来访问history实例，可以通过history实例来进行导航
!必须在BrowserRouter等一类的父组件下，才能使用useHistory，否则无法获取useHistory对象

? useLocation:返回代表当前URL地址的location对象，每当URL发生改变
?都会返回一个location

* useRouteMatch:和<Route></Route>采用相同的方式来匹配当前的URL地址。
*他主要用于无需再渲染一个<Route></Route>组件来获取match数据

todo useParams:返回一个包含URL参数的键值对对象，使用它来访问当前
todo <Route></Route>的match.params对象

"https://cnodejs.org/api/v1/topics"
*/

// 如果是较短的字符串拼接可以采用+拼接，如果较长的字符串拼接的话，需要采用模板字符串的拼接

const Home = () => {
    const history = useHistory();
    const { path, url } = useRouteMatch();
    const [data, setOptions, options] = useRequest("https://cnodejs.org/api/v1/topics");
    const tabs = [
        { title: "全部", tab: "all" },
        { title: "分享", tab: "share" },
        { title: "精华", tab: "good" },
        { title: "问答", tab: "ask" },
        { title: "招聘", tab: "job" },
    ];
    const pageButton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
        <div>
            <ul>
                <div
                    style={{
                        width: 200,
                        height: 200,
                        display: "flex",
                        justifyContent: "space-between",
                        flexWrap: "wrap",
                        fontSize: "18px",
                    }}
                >
                    <Link to={`${url}/all`}>全部</Link>
                    <Link to={`${url}/share`}>分享</Link>
                    <Link to={`${url}/good`}>精华</Link>
                    {/* <Link to="/home/all">全部</Link>
                    <Link to="/home/share">分享</Link>
                    <Link to="/home/good">精华</Link> */}

                    {/* 注意一级路由，二级路由，三级路由的形式 */}
                    <div
                        style={{
                            width: 100,
                        }}
                    >
                        <Route path={`${path}/all`} render={() => <h1>全部</h1>} />
                        <Route path={`${path}/share`} render={() => <h1>分享</h1>} />
                        <Route path={`${path}/good`} render={() => <h1>精华</h1>} />
                        <Redirect to="/home/all" />
                        {/* <Route path="/home/all" render={() => <h1>全部</h1>} />
                        <Route path="/home/share" render={() => <h1>分享</h1>} />
                        <Route path="/home/good" render={() => <h1>精华</h1>} />
                        <Redirect to="/home/all" /> */}
                    </div>
                    <div>
                        {tabs.map((item) => (
                            <button
                                onClick={() => setOptions({ tab: item.tab, page: 1 })}
                                key={item.tab}
                            >
                                {item.title}
                            </button>
                        ))}
                        {/* <button onClick={() => setOptions({ tab: "all" })}>全部</button>
                        <button onClick={() => setOptions({ tab: "share" })}>分享</button>
                        <button onClick={() => setOptions({ tab: "good" })}>精华</button> */}
                    </div>
                    <div>
                        {pageButton.map((item) => (
                            <button
                                onClick={() => setOptions({ ...options, page: item })}
                                key={item}
                            >
                                {item}
                            </button>
                        ))}
                    </div>
                </div>
                {data.map((item) => (
                    <li
                        key={item.id}
                        onClick={() => history.push("/detail/" + item.id)}
                        // js跳转

                        style={{
                            width: "100%",
                            height: "50px",
                            lineHeight: "50px",
                            listStyle: "none",
                            marginLeft: "5px",
                            borderBottom: "1px solid #ccc",
                        }}
                    >
                        {item.title}
                        {/* <Link to={`/detail/${item.id}`}>{item.title}</Link> */}
                        {/* <Link to={"/detail/" + item.id}>{item.title}</Link> */}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Home;

/* data.map((item) => (
    <Link to={'/'+{item.id}}>
        <li
            key={item.id}
            style={{
                width: "100%",
                height: "50px",
                lineHeight: "50px",
                listStyle: "none",
                borderBottom: "1px solid #ccc",
            }}
        >
            {item.title}
        </li>
    </Link>
)) */
